import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:mvvm_provider/base/consumer_status_widget.dart';
import 'package:mvvm_provider/page/bookshelf/states/book_shelf_state.dart';
import '../../../base/base_stateful_page.dart';
import '../../../base/common_refresher.dart';
import '../../../routers/home_router.dart';
import '../../../routers/navigator_utils.dart';
import '../../../widgets/swiper_widget/swiper_widget.dart';
import '../../home/widgets/car_toon_widget.dart';
import '../view_model/book_shelf_view_model.dart';
import '../widgets/crosswise_widget.dart';
import 'package:collection/collection.dart';

class BookShelfPage extends BasePage {
  const BookShelfPage({super.key});

  @override
  BasePageState<BasePage> getState() => _BookShelfPageState();
}

class _BookShelfPageState extends BasePageState<BookShelfPage> {
  @override
  void initState() {
    super.initState();
    super.pageTitle = '书架';
    isBack = false;
  }

  @override
  void buildComplete() {
    super.buildComplete();
    _onRefresh();
  }

  @override
  Widget left() {
    return const SizedBox();
  }

  /// 上拉加载
  void _onLoading() {
    getListData();
  }

  /// 下拉刷新
  void _onRefresh() {
    getListData(isRefresh: true);
  }

  void getListData({bool isRefresh = false}) {
    getViewModel<BookShelfViewModel>().getListData(isRefresh);
  }

  /// 轮播图
  Widget _bannerWidget() {
    return SwiperWidget(
      imagesList: getViewModel<BookShelfViewModel>().state.bannerList,
      width: 1.sw,
      height: 120.h,
      type: 1,
      onTap: (int index) {},
      indexChangeTap: (int index) {},
    );
  }

  /// 网格布局
  Widget _collectionWidget(int index) {
    return CarToonWidget(
      index: index,
      model: getViewModel<BookShelfViewModel>().state.dataList[index],
      isStaggeredGrid: true,
      onTap: () {
        NavigatorUtils.push(context, HomeRouter.bookShelfDetailPage, arguments: {
          "imageUrl": getViewModel<BookShelfViewModel>().state.dataList[index].image
        });
      },
    );
  }

  /// 横向布局
  Widget _crosswiseWidget(int index) {
    return CrosswiseWidget(
      model: getViewModel<BookShelfViewModel>().state.dataList[index],
      onTap: () {
        NavigatorUtils.push(context, HomeRouter.bookShelfDetailPage, arguments: {
          "imageUrl": getViewModel<BookShelfViewModel>().state.dataList[index].image
        });
      },
    );
  }

  @override
  Widget buildPage(BuildContext context) {
    return ConsumerStatusWidget<BookShelfViewModel, BookShelfState>(
      placeHolderType: PlaceHolderType.staggeredGridPlaceHolder,
      refreshMethod: () {},
      builder: (context, state, child) {
        return CommonRefresher(
            enablePullDown: true,
            enablePullUp: true,
            refreshController: getViewModel<BookShelfViewModel>().refreshController,
            onRefresh: _onRefresh,
            onLoading: _onLoading,
            listWidget: SingleChildScrollView(
              controller: getViewModel<BookShelfViewModel>().scrollController,
              child: StaggeredGrid.count(
                crossAxisCount: 2,
                mainAxisSpacing: 10.h,
                crossAxisSpacing: 0,
                children: [
                  ...state.dataList.mapIndexed((index, tile) {
                    return StaggeredGridTile.extent(
                      crossAxisCellCount: tile.crossAxisCount,
                      mainAxisExtent:
                          index == 0 ? 200.h : (tile.crossAxisCount == 2 ? 180.h : 260.h),
                      child: index == 0
                          ? _bannerWidget()
                          : tile.crossAxisCount == 1
                              ? _collectionWidget(index)
                              : _crosswiseWidget(index),
                    );
                  }),
                ],
              ),
            ));
      },
    );
  }
}
